<template>
	<view>
		<nav-list @toggle='toggle'></nav-list>
		<view class="lists">
			<view class="list">
				<view class="head">
					<view class="ID">订单号：123123142312</view>
					<view class="state">待发货</view>
				</view>
				<view class="main">
					<view class="image">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="name">
						蓝月亮洗衣液
						蓝月亮洗衣液
						蓝月亮洗衣液
				
						蓝月亮洗衣液
						蓝月亮洗衣液
						蓝月亮洗衣液
					</view>
					<view class="num">
						x1
					</view>
				</view>
				<view class="message">
					<view class="text">
						<view class="time">
							2021年3月1日
						</view>
						<view class="price">
							￥65.2
						</view>
					</view>
					<view class="type">
						<view class="txt state2" >
							提醒发货
						</view>
						<view class="txt state1" >
							立刻支付
						</view>
						<view class="txt state3" >
							立刻评论
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			toggle(index) {
				console.log(index);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.lists {
		width: 90%;
		margin: auto;
		margin-top: 40rpx;
		.list {
			background-color: #FFFFFF;
			border-radius: 25rpx;
			.head {
				display: flex;
				justify-content: space-between;
				border-bottom: 3rpx solid #ccc;
				height: 60rpx;
				line-height: 60rpx;
				padding:0  20rpx;
				.ID {
					color: #999;
					font-size: 22rpx;
				}
				.state{
					font-weight: 550;
				}
			}
			.main{
				margin: 0 30rpx;
				display: flex;
				.image{
					margin-top: 20rpx;
					width: 120rpx;
					height: 100rpx;
				}
				.name{
					width: 80%;
					margin-top: 35rpx;
					margin-left: 20rpx;
					font-size: 30rpx;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
				.num{
					margin-top: 80rpx;
					color: #999;
				}
				
			}
			.message{
				margin-top: 10rpx;
				padding-bottom: 10rpx;
				.text{
					display: flex;
					justify-content: space-between;
					margin: 0 20rpx;
					.time{
						font-size: 22rpx;
						color:#999
					}
					.price{
						color: #F71205 ;
					}
				}
				.type{
					height: 50rpx;
					margin-right:20rpx ;
					margin-top: 20rpx;
					.txt{
						padding: 2rpx 10rpx;
						float: right;
						border-radius: 15rpx;
					}
					.state1{
						border: #F29100 solid 3rpx;
						box-sizing: border-box;
						color: #F29100;
					}
					.state2{
						background-color: #1AAD19 ;
						box-sizing: border-box;
						color: #FFFFFF;
						border: rgba(0,0,0,.0) solid 3rpx;
					}
					.state3{
						box-sizing: border-box;
						color: #000;
						border: #7D7D7D solid 3rpx;
					}
				}
			}
		}

	}
</style>
